<template>
	<div class="invite-friends-page">
		<!-- Header Section -->
		<div class="header">
			<button class="rewards-btn" @click="goToMyRewards">我的奖励>></button>
		</div>

		<!-- Main Content - Top Banner -->
		<div class="top-banner">
			<div class="banner-content">
				<img src="/static/images/2.png" class="banner-image">
				<!-- 保留规则链接（如需覆盖在图片上） -->
				<a href="#" class="rules-link">活动规则>></a>
			</div>
		</div>

		<!-- Main Content - Envelope Section -->
		<div class="envelope-section">
			<img src="/static/images/3.png" class="envelope-image">
			<text>获得好友下单现金返利</text>
			<!-- Share Button -->
			<img src="/static/images/4.png" class="share-image" @click="goToReward">
			<!-- Bottom Section - Invitation Record -->
			<div class="invitation-record">
				<img src="/static/images/5.png" class="invited-image">
				<text>{{invitedCount}}</text>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'InviteFriendsPage',
		data() {
			return {
				invitedCount: 0
			}
		},
		methods: {
			shareNow() {
				// 分享功能实现
				console.log('分享功能')
			},
			goToReward() {
				// uni-app方式跳转
				uni.navigateTo({
					url: '/pages/reward/reward' // 替换为你的目标页面路径
				});
			},
			goToMyRewards(){
				uni.navigateTo({
					url: '/pages/myRewards/myRewards' // 替换为你的目标页面路径
				});
			}
		},
	}
</script>

<style scoped>
	.invite-friends-page {
		min-height: 120vh;
		background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* Header Styles */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 16px;
		/* background: #fff; */
		/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
	}

	.rewards-btn {
		background: #e53e3e;
		color: white;
		border: none;
		padding: 6px 12px;
		border-radius: 16px 0 0 16px;
		/* 顺序：左上 右上 右下 左下 */
		font-size: 12px;
		cursor: pointer;
		/* 新增定位属性 */
		position: absolute;
		/* 或 fixed，根据需求选择 */
		right: 0;
		/* 紧贴右边缘 */
		top: 5%;
		/* 垂直居中，可根据需要调整 */
		transform: translateY(-50%);
		/* 垂直居中 */
	}

	/* Top Banner Styles */
	.top-banner {
		width: 100%;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		padding: 10px 0;
		/* 上下留白 */
	}

	.banner-content {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 子元素水平居中 */
		gap: 10px;
		/* 图片和链接之间的间距 */
	}

	.banner-image {
		max-width: 80%;
		/* 图片自适应宽度 */
		height: auto;
		/* 保持图片比例 */
		display: block;
		/* 去除图片底部间隙 */
	}

	.rules-link {
		color: #333;
		/* 链接颜色 */
		text-decoration: none;
		/* 去除下划线 */
		font-size: 14px;
		padding: 5px 10px;
		/*  border: 1px solid #ddd; */
		/* 可选边框 */
		border-radius: 4px;
		/* 圆角 */
	}

	/* Envelope Section Styles */
	.envelope-section {
		position: relative;
		/* 创建定位上下文 */
		width: fit-content;
		/* 根据内容调整宽度 */
		margin: 0 auto;
		/* 水平居中 */
	}

	.envelope-image {
		display: block;
		/* 去除图片底部间隙 */
		width: 100%;
		/* 图片宽度自适应 */
		max-width: 300px;
		/* 限制最大宽度 */
	}

	.envelope-section text {
		position: absolute;
		top: 50%;
		/* 垂直居中 */
		left: 50%;
		/* 水平居中 */
		transform: translate(-50%, -50%);
		/* 精确居中 */
		color: gray;
		/* 文字颜色 */
		font-size: 12px;
		/* 文字大小 */
		font-weight: bold;
		/* 文字加粗 */
	}

	.share-image {
		position: absolute;
		top: 70%;
		/* 垂直居中 */
		left: 50%;
		/* 水平居中 */
		transform: translate(-50%, -50%);
		width: auto;
		/* 分享按钮大小 */
		height: 35px;
		cursor: pointer;
		/* 鼠标手型 */
	}

	.invitation-record {
		position: absolute;
		top: 85%;
		/* 定位到容器顶部 */
		left: 50%;
		transform: translateX(-50%);
		/* 水平居中 */
		width: 90%;
		/* 宽度控制 */
		z-index: 2;
		/* 确保在上层 */
	}

	/* 数字文本 - 覆盖在邀请记录图片上 */
	.invitation-record text {
		position: absolute;
		top: 37%;
		left: 57%;
		transform: translate(-50%, -50%);
		color: white;
		/* 红色数字 */
		font-size: 15px;
		font-weight: normal;
		/* 文字阴影 */
		z-index: 3;
		/* 确保在最上层 */
	}

	/* 邀请记录图片 */
	.invited-image {
		width: 100%;
		display: block;
		filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
		/* 添加阴影效果 */
	}
</style>